<template>
  <div class="vc-login-container">
    <div>
      <div class="vc-login-title">项目管理后台</div>
      <div class="vc-login-form">
        <div>
          <div
            class="vc-label-name-down"
            :class="{ 'vc-label-up': name }"
            @click="focusInput('name')"
          >
            用户名
          </div>
          <div class="vc-form-input">
            <input
              type="text"
              autocomplete="off"
              id="name"
              class="vc-form-input__inner"
              :readonly="readonly"
              v-model="name"
              @focus="focusInput('name')"
              @blur="blurInput('name')"
              @keyup.enter="login"
            />
          </div>
        </div>

        <div>
          <div
            class="vc-label-pwd-down"
            :class="{ 'vc-label-up': pwd }"
            @click="focusInput('pwd')"
          >
            密码
          </div>
          <div class="vc-form-input">
            <input
              type="password"
              autocomplete="off"
              id="pwd"
              class="vc-form-input__inner"
              :readonly="readonly"
              v-model="pwd"
              @focus="focusInput('pwd')"
              @blur="blurInput('pwd')"
              @keyup.enter="login"
            />
          </div>
        </div>

        <button type="button" class="vc-form-button" @click="login">
          <span>登 录</span>
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import qs from 'qs'

export default {
  name: 'login',
  data () {
    return {
      name: '',
      pwd: '',
      readonly: true
    }
  },
  beforeRouteEnter (to, from, next) {
    if (to.params && to.params.logout) {
      window.location.reload()
      return
    }
    next()
  },
  mounted () {
    let divs = document.querySelectorAll('.v-modal, .el-dialog__wrapper')
    for (let div of divs) {
      document.body.removeChild(div)
    }
  },
  methods: {
    /**
     * 登录
     */
    login () {
      if (!this.name) {
        $('#name').focus()
        return
      }
      if (!this.pwd) {
        $('#pwd').focus()
        return
      }
      // this.$api.login({
      //   data: qs.stringify({
      //     username: this.name,
      //     passwd: this.ENCRYPT.RSAencrypt(this.pwd)
      //   })
      // }).then(res => {
      //   if (!res.success) {
      //     this.$store.commit('SETTOKEN', '')
      //     return
      //   }
      //   this.$store.commit('SETTOKEN', res.data ? res.data.token : 'test')
      //   this.$router.push({ name: 'loading' })
      // })
      this.$store.commit('SETTOKEN', 'test')
      this.$router.push({ name: 'loading' })
    },
    /**
     * 输入框获取焦点事件
     */
    focusInput (label) {
      this.readonly = false
      $(`.vc-label-${label}-down`).addClass('vc-label-up')
      $(`#${label}`).focus()
    },
    /**
     * 输入框失去焦点事件
     */
    blurInput (label) {
      label === 'name' && !this.name && $('.vc-label-name-down').removeClass('vc-label-up')
      label === 'pwd' && !this.pwd && $('.vc-label-pwd-down').removeClass('vc-label-up')
    }
  }
}
</script>

<style lang="less">
.vc-theme-default {
  .vc-login-container {
    background-image: url("../../assets/img/login1.png");
    & > div {
      .vc-login-form {
        & > div {
          .vc-label-up {
            color: #728aae;
          }
        }
        .vc-form-input__inner:focus {
          border-color: #508afd;
        }
        .vc-form-button,
        .vc-form-button:focus {
          background-color: #508afd;
          border: 1px solid #508afd;
        }
        .vc-form-button:hover {
          background: #689ffe;
          border-color: #689ffe;
        }
      }
    }
  }
}
.vc-theme-green {
  .vc-login-container {
    background-image: url("../../assets/img/login2.png");
    & > div {
      .vc-login-form {
        & > div {
          .vc-label-up {
            color: #06aea3 !important;
          }
        }
        .vc-form-input__inner:focus {
          border-color: #31c7b2;
        }
        .vc-form-button,
        .vc-form-button:focus {
          background-color: #31c7b2;
          border: 1px solid #31c7b2;
        }
        .vc-form-button:hover {
          background: rgba(49, 199, 178, 0.9);
          border-color: rgba(49, 199, 178, 0.9);
        }
      }
    }
  }
}
.vc-login-container {
  width: 100%;
  height: 100%;
  min-width: 400px;
  min-height: 600px;
  display: flex;
  align-items: center;
  background-position: bottom left;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  & > div {
    width: 100%;
    text-align: center;
    .vc-login-title {
      font-family: "YouYuan";
      font-size: 30px;
      color: #fff;
    }
    .vc-login-form {
      width: 218px;
      margin: 68px auto 0;
      padding: 16px 41.5px 37px;
      border-radius: 4px;
      background: #fff;
      & > div {
        position: relative;
        .vc-label-name-down,
        .vc-label-pwd-down {
          position: absolute;
          top: 36px;
          font-size: 14px;
          color: #c6cdd5;
          z-index: 10;
          transition: all 0.3s;
        }
        .vc-label-up {
          position: absolute;
          top: 13px;
          font-size: 12px;
          z-index: 10;
        }
      }
      .vc-form-input {
        position: relative;
        font-size: 14px;
        display: inline-block;
        width: 100%;
      }
      .vc-form-input__inner {
        -webkit-appearance: none;
        background-color: #fff;
        border: 1px solid #dbe2ec;
        color: #444444;
        display: inline-block;
        height: 30px;
        line-height: 30px;
        outline: 0;
        width: 100%;
        background-image: none;
        margin-top: 30px;
        padding: 0;
        border-radius: 0;
        border-top: none;
        border-left: none;
        border-right: none;
        font-size: 14px;
      }
      .vc-form-input__inner:focus {
        outline: none;
      }
      .vc-form-input__inner:hover {
        border-color: #c0c4cc;
      }
      .vc-form-button {
        display: inline-block;
        line-height: 1;
        white-space: nowrap;
        cursor: pointer;
        -webkit-appearance: none;
        text-align: center;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        outline: 0;
        margin: 0;
        -webkit-transition: 0.1s;
        transition: 0.1s;
        font-weight: 500;
        font-size: 16px;
        margin-top: 70px;
        width: 100%;
        color: #fff;
        border-radius: 3px;
        padding: 10px 23px;
      }
      .vc-form-button:focus,
      .vc-form-button:hover {
        color: #fff;
      }
      button,
      input {
        overflow: visible;
      }
    }
  }
}
</style>
